<template>
	<u-tabbar
	:placeholder="false"
	:value="current"
	:fixed="true"
	:zIndex="1000"
	:safeAreaInsetBottom="false"
	>
		<u-tabbar-item v-for="(item, k) in list" :text="item.text" :name="k" @click="click">
			<template #active-icon>
				<image class="w5 h5" :src="item.icon" />
			</template>
			<template #inactive-icon>
				<image class="w5 h5" :src="item.icon_on" />
			</template>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script lang="ts">
import util from '@/utils/util'
import {mapState} from 'pinia'
import userStore from '@/store/user'

export default {
	props: {
		current: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
		}
	},
	computed: {
		...mapState(userStore, ['cartCount']),
		list(){
			return [{
					name: 'home',
					path: "/pages/index",
					icon: "/static/tabbar/home.png",
					icon_on: "/static/tabbar/home-on.png",
					text: '首页'
				}, {
					name: 'cate',
					path: "/pages/cate",
					icon: "/static/tabbar/cate.png",
					icon_on: "/static/tabbar/cate-on.png",
					text: '分类',
					customIcon: false,
				}, {
					name: 'purchase',
					icon: "/static/tabbar/purchase.png",
					icon_on: "/static/tabbar/purchase-on.png",
					text: '共享采购',
					midButton: true,
					customIcon: false,
				}, {
					name: 'cart',
					icon: "/static/tabbar/cart.png",
					icon_on: "/static/tabbar/cart-on.png",
					text: '购物车',
					count: this.cartCount
				}, {
					name: 'my',
					path: "/pages/my",
					icon: "/static/tabbar/my.png",
					icon_on: "/static/tabbar/my-on.png",
					text: '我的',
					isDot: false
				}
			]
		}
	},
	methods:{
		click(index) {
			if(index !== this.current){
				util.navto(['index', 'cate', 'stob/index', 'flow/cart', 'my'][index])
			}
		}
	}
}
</script>